<template>
	<view>
		<view class="tab_nav">
			<nav-bar nav_btn="back" :title="title" :showPicker="false" :color="color" :placeholder="placeholder" :auto_img="image" :background="background"></nav-bar>
		</view>
		<view style="background: #fff; padding: 56rpx 0 34rpx 0; border-bottom: 4rpx solid #f4f5f9">
			<view class="flex align-center" style="margin: 0 32rpx 0 32rpx; background: #f3f3f3; border-radius: 8rpx; padding: 14rpx 24rpx">
				<view style="font-size: 0; margin-right: 14rpx">
					<image style="width: 40rpx; height: 40rpx" src="./static/10.png" mode=""></image>
				</view>
				<input @input="search" class="flex-1" type="text" v-model="keyWords" placeholder="姓名/电话/昵称搜索" />
				<view v-if="keyWords" style="font-size: 0; margin-left: 10rpx">
					<image style="width: 28rpx; height: 28rpx" src="./static/21.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex" style="padding: 20rpx 34rpx; border-bottom: 2rpx solid #f4f5f9">
			<view style="font-size: 0; margin-right: 20rpx">
				<image style="width: 84rpx; height: 84rpx; border-radius: 50%" :src="item.avatar" mode=""></image>
			</view>
			<view class="flex flex-clum justify-between" style="height: 84rpx">
				<view style="font-size: 30rpx; font-weight: 700; color: #333">{{ item.nickname }}{{ item.true_name ? `（${item.true_name}）` : '' }}</view>
				<view style="font-size: 26rpx; color: #999">
					{{ item.mobile }}
				</view>
			</view>
		</view>
		<!-- 新增店铺会员弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="tips">
				<view class="title">新增店铺会员</view>
				<uni-icons class="close" type="clear" color="#E9DDCF" size="22" @click="$refs.popup.close()"></uni-icons>
				<view class="flex align-center input">
					<input v-model="trueName" class="flex-1" :disabled="isDisabled" type="text" placeholder-class="input-placeholder" placeholder="请输入真实名称" />
					<block v-if="!isDisabled">
						<view v-show="trueName" @click="trueName = ''" style="font-size: 0">
							<image style="width: 28rpx; height: 28rpx" src="./static/21.png"></image>
						</view>
					</block>
				</view>
				<view class="flex align-center input">
					<input v-model="money" class="flex-1" type="digit" placeholder-class="input-placeholder" placeholder="请输入锁定金额" />
					<view v-show="money" @click="money = ''" style="font-size: 0">
						<image style="width: 28rpx; height: 28rpx" src="./static/21.png"></image>
					</view>
				</view>
				<view @click="confirm" class="btn confirm">确定</view>
			</view>
		</uni-popup>
		<!-- 新增店铺会员成功后弹窗 -->
		<uni-popup ref="result" type="center">
			<view class="tips">
				<view class="title">提示</view>
				<view class="content">已提交！审核通过后，才能成为本店店铺会员，请联系商家管理员尽快审核！</view>
				<view class="btn confirm" @click="goback">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '新增店铺会员',
			image: '../static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#ffffff',
			item: '',
			keyWords: '',
			money: '',
			trueName: '',
			isDisabled: false,
			shopId: 0
		};
	},
	onLoad(options) {
		let obj = JSON.parse(decodeURIComponent(options.obj));
		console.log(obj);
		this.item = obj;
		this.keyWords = this.item.keyWords;
		this.shopId = this.item.shopId;
		this.trueName = obj.true_name;
		this.isDisabled = obj.true_name?.length ? true : false;
		this.$refs.popup.open();
	},
	methods: {
		// 点击取消
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		//点击确定
		confirm() {
			this.$request({
				url: 'wokers/user_add',
				method: 'POST',
				data: {
					user_id: this.item.id,
					quota: this.money,
					true_name: this.trueName,
					shop_id: this.shopId
				}
			}).then((res) => {
				if (res.data.code == 1) {
					this.$refs.popup.close();
					this.$refs.result.open();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		goback() {
			this.$refs.result.close();
			uni.navigateBack({
				delta: 2
			});
		}
	}
};
</script>

<style scoped lang="scss">
.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}

.flex-clum {
	flex-direction: column;
}

.align-center {
	align-items: center;
}

.align-end {
	align-items: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}
.tab_nav {
	background-color: #ffffff;
}
.tips {
	position: relative;
	width: 600rpx;
	padding: 32rpx;
	background: linear-gradient(to bottom, #fbf2e7ff, #fff), #fff;
	border-radius: 32rpx;
	box-sizing: border-box;
	z-index: 1;
	.title {
		padding-top: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		line-height: 50rpx;
		color: #333;
	}
	.close {
		position: absolute;
		right: 32rpx;
		top: 46rpx;
		z-index: 20;
	}
	.content {
		padding: 32rpx;
		line-height: 52rpx;
		font-size: 32rpx;
		color: #666;
	}
	.input {
		margin: 40rpx 25rpx;
		background: #f3f3f3;
		border-radius: 8px;
		height: 68rpx;
		padding-left: 32rpx;
		padding-right: 20rpx;
		border: 2rpx solid #cdcdcd;
		border-radius: 34rpx;
	}
	/deep/.input-placeholder {
		color: #c3c3c3;
		font-size: 28rpx;
	}
	.btn-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.btn {
		width: calc(100% - 50rpx);
		height: 68rpx;
		margin: 0 25rpx;
		line-height: 68rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 34rpx;
	}
	.cancel {
		background: #f3f3f3;
		color: #333;
	}
	.confirm {
		background: #ebbe87;
		color: #fff;
	}
}
</style>
